<template>
    <div class="weather-widget">
        <!-- 今日天气 -->
        <div v-if="currentWeather" class="today-weather">
        <p class="city">{{ currentWeather.city }} 今日天气: {{ currentWeather.weather }}</p>
        <div class="weather-info">
            <i :class="getWeatherIconClass(currentWeather.weather)" class="weather-icon"></i>
            <div>
            <p class="temperature">{{ currentWeather.temperature }}°C</p>
            <p class="humidity">湿度：{{ currentWeather.humidity }}  风向：{{ currentWeather.winddirection }}</p>
            </div>
        </div>
        </div>
        <!-- 明后天气预报 -->
        <div v-if="forecastWeather" class="forecast">
        <div class="forecast-items">
            <div
            v-for="(forecast, index) in forecastWeather"
            :key="index"
            class="forecast-item"
            >
            <h4>{{ forecastLabels[index] }}</h4>
            <i :class="getWeatherIconClass(forecast.dayWeather)" class="forecast-icon"></i>
            <p>{{ forecast.nightTemp }}°C ~ {{ forecast.dayTemp }}°C</p>
            <p>天气：{{ forecast.dayWeather }}</p>
            <p>风向：{{ forecast.dayWindDirection }}</p>
            </div>
        </div>
        </div>
        <div v-else>
        <p>加载天气数据中...</p>
        </div>
    </div>
    </template>
    
    <script setup>
    import { ref, onMounted, onUnmounted, computed } from "vue";
    import { apiKey } from "@/constant/weather/index.js";
    import axios from "axios";
    
    const currentWeather = ref(null); // 当前天气数据
    const forecastWeather = ref(null); // 未来天气数据
    let updateInterval = null;
    
    const weatherIconMap = {
    "晴": "qi-100",
    "多云": "qi-101",
    "阴": "qi-104-fill",
    "阵雨": "qi-300",
    "雷阵雨": "qi-303",
    "小雨": "qi-305",
    "中雨": "qi-306",
    "大雨": "qi-307",
    "小雪": "qi-400",
    "中雪": "qi-401",
    "大雪": "qi-403",
    "雨夹雪": "qi-404",
    };
    
    const getWeatherIconClass = (weather) => {
    return weatherIconMap[weather] || "qi-unknown";
    };
    
    const fetchWeatherData = async () => {
    try {
        const city = "440300";
        const liveWeatherUrl = `https://restapi.amap.com/v3/weather/weatherInfo?key=${apiKey}&city=${city}&extensions=base`;
        const liveWeatherResponse = await axios.get(liveWeatherUrl);
    
        if (liveWeatherResponse.data.status === "1" && liveWeatherResponse.data.lives.length > 0) {
        const liveWeather = liveWeatherResponse.data.lives[0];
        currentWeather.value = {
            city: liveWeather.city,
            temperature: liveWeather.temperature,
            weather: liveWeather.weather,
            humidity: liveWeather.humidity,
            winddirection: liveWeather.winddirection,
        };
        }
    
        const forecastWeatherUrl = `https://restapi.amap.com/v3/weather/weatherInfo?key=${apiKey}&city=${city}&extensions=all`;
        const forecastWeatherResponse = await axios.get(forecastWeatherUrl);
    
        if (forecastWeatherResponse.data.status === "1" && forecastWeatherResponse.data.forecasts.length > 0) {
        const forecast = forecastWeatherResponse.data.forecasts[0].casts.slice(0, 3);
        forecastWeather.value = forecast.map((item) => ({
            date: item.date,
            dayTemp: item.daytemp,
            nightTemp: item.nighttemp,
            dayWeather: item.dayweather,
            dayWindDirection: item.daywind,
        }));
        }
    } catch (error) {
        console.error("获取天气数据失败：", error);
    }
    };
    
    const startAutoUpdate = () => {
    fetchWeatherData();
    updateInterval = setInterval(fetchWeatherData, 60 * 60 * 1000);
    };
    
    const stopAutoUpdate = () => {
    if (updateInterval) clearInterval(updateInterval);
    };
    
    const forecastLabels = computed(() => ["今天", "明天", "后天"]);
    
    onMounted(() => startAutoUpdate());
    onUnmounted(() => stopAutoUpdate());
    </script>
    
    <style scoped>
    @use "@/styles/themes.scss";
    .weather-widget {
      margin-top: -10px;
      /* padding: 15px; */
      flex-grow: 1;
      overflow: auto;
    
      .todaydate {
        border-top: 3px solid var(--primary-color);
        background-color: var(--secondary-color);
        color: var(--primary-color);
        font-size: 18px;
        font-weight: bold;
        padding: 5px 0;
        text-align: center;
      }
    
      .city {
        font-size: 20px;
        font-weight: bold;
        color: var(--Nav-hover-color);
        margin-bottom: -10px;
      }
    
      .today-weather {
        margin-left: 20px;
        text-align: left;
        margin-bottom: 20px;
    
        .weather-info {
          display: flex;
          align-items: center;
          justify-content: left;
    
          .weather-icon {
            font-size: 80px;
            color: var(--primary-color);
            margin-right: 15px;
            transition: transform 0.3s ease-in-out;
          }
    
          .weather-icon:hover {
            transform: scale(1.1);
          }
    
          .temperature {
            font-size: 40px;
            font-weight: bold;
            color: var(--primary-color);
            margin-bottom: 0;
          }
    
          .humidity,
          .wind {
            font-size: 14px;
            color: #616161;
            line-height: 1.5;
          }
        }
      }
    
      .forecast {
        margin-top: 20px;
    
        .forecast-items {
          display: flex;
          gap: 15px;
          justify-content: center;
    
          .forecast-item {
            text-align: center;
            padding: 4px;
            background: linear-gradient(10deg, var(--text-color), #f0f0f0);
            border: 1px solid #ddd;
            border-radius: 10px;
            box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1),
              -2px -2px 6px rgba(255, 255, 255, 0.7);
            transition: box-shadow 0.3s, transform 0.3s;
          }
    
          .forecast-item:hover {
            box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
            transform: translateY(-5px);
          }
    
          h4 {
            font-size: 16px;
            margin-bottom: 5px;
            color: var(--primary-color);
          }
    
          .forecast-icon {
            font-size: 50px;
            color: var(--Nav-rightleft-color);
            margin-bottom: 10px;
          }
    
          p {
            font-size: 14px;
            color: #757575;
            margin: 5px 0;
          }
        }
      }
    }
    
    </style>
    